<template>
    <div id="app">
     <template v-if="!login">
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline class="loginform">
        <FormItem prop="name">
            <Input type="text" v-model="formInline.name" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
     </template>
        <template v-if="login">
            <div class="layout">
                <Layout :style="{minHeight: '100vh'}">
                    <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                        <Menu :active-name="activeName" theme="dark" width="auto" :class="menuitemClasses" @on-select="route">
                            <MenuItem name="/">
                                <Icon type="ios-navigate"></Icon>
                                <span>首页 </span>
                                </MenuItem>
                            <MenuItem name="/user">
                                <Icon type="search"></Icon>
                                <span>用户管理 </span>
                            </MenuItem>
                            <MenuItem name="/cate">
                                <Icon type="settings"></Icon>
                                <span>分类管理</span>
                            </MenuItem>
                            <MenuItem name="/news">
                                <Icon type="clipboard"></Icon>
                                <span>新闻管理</span>
                            </MenuItem>
                            <MenuItem name="/product">                   
                            <Icon type="person"></Icon>
                                <span>产品管理</span>
                            </MenuItem>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                        后台管理系统
                        <div style="float:right;margin-right:5%;">
                        {{username}}
                        <Button type="error" @click="userLogin(false);">退出</Button>
                        </div>
                        </Header>
                        <Content :style="{padding: '0 16px 16px'}">
                            <Breadcrumb :style="{margin: '16px 0'}">
                                <template v-for="(data,index) in breadCrumb">
                                    <BreadcrumbItem>{{data}}</BreadcrumbItem>
                                </template>
                            </Breadcrumb>
                            <Card>
                            <div style="min-height:500px">
                            <keep-alive>
                                <router-view @newsComment="breadCrumbSet"></router-view>
                            </keep-alive>
                            </div>
                            </Card>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        </template>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
import axios from "axios";
export default {
  name: 'app',
    data () {
            return {
                username:'',
                isCollapsed: false,
                activeName:"/",
                breadCrumb:['home'],
                formInline: {
                    name: '',
                    password: ''
                },
                ruleInline: {
                    name: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            };
        },
        beforeMount(){
            this.activeName=this.$route.path;
            this.breadCrumbSet();
            
        },
        computed: {
            ...mapGetters(['login']),
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
      },
      methods:{
          breadCrumbSet(){
              var path=this.$route.path.substr(1);
              console.log(this.$route);
              path=path.split('/');
              if(!path[0]){
                   this.breadCrumb=['home'];
              }else{
                  this.breadCrumb=path;
              }
          },
          userLogin(data){
              this.$store.dispatch("checkLogin",data);
          },
          route(path){
             this.$router.push(path);
             this.breadCrumbSet();
          },
          handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post("http://10.31.160.22:3000/users/login",this.formInline).then(res=>{
                            console.log(res);
                            if(!res.data){
                                this.$Message.error('用户名或密码错误')
                            }else{
                  this.$refs['formInline'].resetFields();
                                this.userLogin(true);
                                this.username=res.data.name;
                                this.$Message.success('登录成功!');
                            }                            
                            }).catch(error=>{
                                this.$Message.error('登录失败!');
                            });
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
      }
}
</script>

<style scoped lang="scss">
    .loginform{
        text-align:center;
        margin-top:200px;
    }
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
